<template>
  <div id="options">
    <top-bar :title="title"></top-bar>
    <div class="set_list">
      <md-field>
        <md-input-item ref="phone" v-model="user_phone" placeholder="请输入您的手机号" type="phone" maxlength="11">
          <md-icon name="drjc_telephone" slot="left"></md-icon>
        </md-input-item>
      </md-field>
      <md-field>
        <md-input-item ref="code" v-model="yzm" placeholder="请输入短信验证码" type="digit" maxlength="6">
          <md-icon name="yzm_icon" slot="left"></md-icon>
          <span class="get-code-button" slot="right" @click="getcodeBtn">{{codeText}}</span>
        </md-input-item>
      </md-field>
    </div>
    <p class="rzBtn" @click="setBtn">注册</p>
    <div class="agree-container">
      <p>
        注册即代表阅读并同意
        <router-link to="/useragreement">《平安到家用户服务协议》</router-link>
      </p>
    </div>
    <p class="gologin">
      已有账号？
      <router-link to="/Login">去登录</router-link>
    </p>
  </div>
</template>
<script>
import '@/assets/svgs/drjc_telephone.svg';
import '@/assets/svgs/yzm_icon.svg';
import '@/assets/svgs/mima_icon.svg';
import '@/assets/svgs/yincang_icon.svg';
import '@/assets/svgs/xianshi_icon.svg';
import { Tabs, Icon, Field, InputItem, Toast, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '注册',
      user_phone: '',
      countingDown: '',
      codeText: '获取验证码',
      yzm: '',
      intervalId: '',
      sec: 60,
      islogin: true
    };
  },
  methods: {
    getcodeBtn() {
      var reg = /^1[23456789]\d{9}$/;
      if (!this.user_phone) {
        Toast({
          content: '请输入手机号',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!reg.test(this.user_phone)) {
        Toast({
          content: '手机号格式错误',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.countingDown === true) {
        return false;
      }
      this.getCode();
    },
    // 获取验证码
    getCode() {
      var data = {
        user_phone: encryptByDESModeEBC(this.user_phone),
        type: '2'
      };
      Loading.show();
      http.post('/pakj/passenger/getPhoneCode', data).then(res => {
        Loading.hide();
        console.log(res.data);
        if (res.data.code === '000000') {
          Toast({
            content: '验证码已发送',
            duration: 3000,
            hasMask: true
          });
          this.countdown();
        } else if (res.data.code === '200022') {
          Dialog.confirm({
            title: '账号已注册',
            content: '当前手机号已注册，请直接登录',
            confirmText: '去登录',
            onConfirm: () => {
              this.$router.push({
                name: 'Login'
              });
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    countdown() {
      this.intervalId = setInterval(() => {
        this.countingDown = true;
        this.codeText = this.sec + '秒后重试';
        this.sec = this.sec - 1;
        if (this.sec < 0) {
          clearInterval(this.intervalId);
          this.codeText = '获取验证码';
          this.countingDown = false;
        }
      }, 1000);
    },
    setBtn() {
      var reg = /^1[34578]\d{9}$/;
      if (!this.user_phone) {
        Toast({
          content: '请输入手机号',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!reg.test(this.user_phone)) {
        Toast({
          content: '手机号格式错误',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.yzm) {
        Toast({
          content: '请输入验证码',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.yzm.length !== 6) {
        Toast({
          content: '请输入6位有效验证码',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      var data = {
        user_phone: encryptByDESModeEBC(this.user_phone),
        mobileCode: this.yzm
      };
      Loading.show();
      http.post('/pakj/wexin/regest', data).then(res => {
        Loading.hide();
        console.log(res.data);
        if (res.data.code === '000000') {
          Dialog.alert({
            title: '注册',
            content: '注册成功',
            confirmText: '确定',
            onConfirm: () => {
              this.login();
            }
          });
        } else {
          Toast({
            content: res.data.msg,
            duration: 3000,
            hasMask: true
          });
        }
      });
    },
    // 登录
    login() {
      var data = {
        user_phone: this.user_phone,
        mobileCode: this.yzm,
        url: 'pakj/wexin/login',
        type_code: '1' // 注册成功后调登录时区分验证码是否重用
      };
      this.$store.dispatch('login', data).then(res => {
        this.$router.push({
          name: 'Home'
        });
      });
    },
    startFun(str, frontLen, endLen) {
      var len = str.length - frontLen - endLen;
      var xing = '';
      for (var i = 0; i < len; i++) {
        xing += '*';
      }
      return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#options {
  height: 100vh;
  background-color: color-primary-background;
}

.set_list {
  padding-top: 20px;
}

.set_text {
  text-align: center;
  margin: 42px 0px;
  font-size: 26px;
  color: #999;
}

.rzBtn {
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  text-align: center;
  background-color: #FF6917;
  color: #fff;
  margin: 40px 20px 0px 20px;
  border-radius: 7px;
}

.get-code-button {
  min-width: 160px;
  height: 48px;
  font-size: 24px;
  margin-right: 90px;
  display: inline-block;
  background-color: #FF6917;
  text-align: center;
  line-height: 48px;
  color: #fff;
  border-radius: 7px;
}

.pwd_text {
  font-size: 24px;
  color: #999;
  margin-left: 30px;
  margin-top: 10px;
}

.agree-container {
  margin: 10px 30px;
  color: #999;
  font-size: 22px;
}

.agree-container p a {
  color: #FF6917;
  text-decoration: none;
}

.gologin {
  font-size: 24px;
  color: #666;
  text-align: center;
  margin-top: 58vh;
}

.gologin a {
  color: #FF6917;
  text-decoration: none;
  margin-left: 5px;
}
</style>
